import React from "react";
import { useLocation } from "react-router-dom";
import { ListState } from "../home";
import axios from "axios";

const Index: React.FC = () => {
  const location = useLocation();
  const v = location.state as ListState;

  const data = {
    title: v.title,
    price: v.price,
    id: new Date().getTime()
  }
  const handlePay = async () => {
    const resp = await axios.post('/api/pay/zhifubao', data);
    const { code, data: respData, error } = resp.data;
    if(code === 200) {
      window.location.href = respData
    } else {
      console.log(error)
    }
  }
  return (
    <div>
      <dl className="list-item">
        <dt>
          <img src={v.image} alt="" />
        </dt>
        <dd>
          <h3>{v.title}</h3>
          <div>{v.desc}</div>
          <div>
            {v.price}
          </div>
        </dd>
      </dl>

      <div className="btm">
        <button onClick={() => handlePay()}>立即下单</button>
      </div>
    </div>
  );
};

export default Index;
